<template>
  <div>
    <button ref="btnRef">btnRef</button>
    <button @click="infoClick">info:{{ info }}</button>
  </div>
</template>

<script setup>
import { ref, watchEffect, onUpdated, onBeforeUpdate, onMounted } from "vue";
const btnRef = ref(null);
const info = ref("info");
const infoClick = () => {
  info.value += "1";
};
// 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
// 返回值是一个用来停止该副作用的函数。
const stopLister = watchEffect(
  () => {
    console.log("watchEffect自动收集依赖监听", btnRef.value);
  },
  {
    flush: "post",
  }
);
const stopWatchInfo = watchEffect((cleanUp) => {
  // 清理回调会在该副作用下一次执行前被调用
  cleanUp(() => {
    if (info.value.length > 8) {
      stopWatchInfo();
    }
  });
  console.log("watchEffect自动收集依赖监听", info.value);
});
onMounted(() => {
  console.log("组件挂载");
});
onUpdated(() => {
  console.log("组件更新完成");
});
onBeforeUpdate(() => {
  console.log("组件更新之前");
});
</script>

<style scoped>
button {
  padding: 20px 20px;
  background-color: pink;
}
</style>
